<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>网页传参</title>
    <style>
        p {
            text-align: center;
        }

        input[type="button"] {
            padding-left: 3px;
            cursor: pointer;
        }

        .outer {
            width: 330px;
            margin: 10px auto;
            text-align: center;
        }

        .div1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
        window.onload = function () {
            var oInput = document.getElementsByTagName("input");
            var oBut1 = oInput[2];
            var oBut2 = oInput[3];
            var I = document.getElementsByClassName("div1");

            oBut1.onclick = function () {
                alert("地区：" + oInput[0].value + "\n地点： " + oInput[1].value);
            }

            oBut2.onclick = function(){
                for (var i=0; i<I.length; i++){
                    I[i].style.background = "green" ;
                   // console.log((I[i].style[background-color] ));
                }
            }
        }
    </script>
</head>

<body>
    <p>
        <input type="text" placeholder="北京市" value="北京市">
    </p>
    <p>
        <input type="text" placeholder="朝阳区" value="朝阳区">
    </p>
    <p>
        <input type="button" value="传参">
    </p>
</body>

</html>